import React from 'react';

class Resizable extends React.Component {
  constructor() {
    this.state = {
      size: [windiw.innerWidth, window.innerHeight]
    }
  }

  onResize = () => {
    this.setState({
      size: [windiw.innerWidth, window.innerHeight]
    });
  }

  componentDidMount() {
    window.addEventListener('resize', this.onResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize);
  }

  render() {
    return this.props.render(this.props.size);
  }
}

class Foo extends React.Component {
  render() {
    const [width, height] = this.props.size;
    return (
      <div>{width},{height}</div>
    )
  }
}

export default <Resizable render={size => <Foo size={size} />} />

// 实现了复用Resize的逻辑
// 用一个函数属性的执行结果，来当做自己的渲染结果，相当于Foo组件进入了Resizable组件的内部，拿到了其内部变量size，有种闭包的感觉
// https://www.jianshu.com/p/f7c6cd1a6595
// http://react.caibaojian.com/docs/render-props.html